<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			@media screen and (min-width: 1024px){
				.big{
					width: 1024px;
					height: 1600px;
					border: 2px solid red;
					background: lightskyblue;
					float: left;
				}
			
			}
			@media screen and (min-width: 924px) {
				.box1{width: 924px;
				height: 400px;
				border: 2px solid deeppink;
				border-radius: 3%;
				background: gray;
				margin-top: 20px;
				margin-left: 50px;}
				}
				@media screen and (min-width: 600px) {
				.box2{width: 550px;
				height: 900px;
				border: 2px solid deeppink;
				border-radius: 3%;
				float: left;
				background: lightgreen;
				margin-top: 10px;
				margin-left: 20px;}
				}
				@media screen and (min-width: 400px) {
				.box3{width: 400px;
				height: 900px;
				border: 2px solid deeppink;
				border-radius: 3%;
				/*display: inline-block;*/
				float: left;
				background: lightgreen;
				margin-top: 10px;
				margin-left: 20px;}
				}
				@media screen and (min-width: 1024px) {
				.box4{width: 960px;
				height: 230px;
				border: 2px solid deeppink;
				border-radius: 3%;
				/*display: inline-block;*/
				float: left;
				background: pink;
				margin-top: 10px;
				margin-left: 20px;}
				}
				
		</style>
	</head>
	<body>
		<div class="big">
				<div class="box1"></div>
			
				<div class="box2"></div>
				<div class="box3"></div>
			
				<div class="box4"></div>
			
		</div>
	</body>
</html>
